<template>
  <div style="width: 100%" class="match-list-table">
    <el-table :data="tableData" border fit style="width: 100%">
      <el-table-column
        label="客户"
        align="right"
        width="150"
        show-overflow-tooltip
      >
        <el-table-column label="员工" width="150" show-overflow-tooltip>
          <template v-slot="{ row }">
            {{ row.name }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        v-for="(col, index) in columnList"
        :key="index"
        :label="col.label"
        align="center"
        min-width="150px"
        show-overflow-tooltip
      >
        <p slot="header">
          {{ col.label }}
        </p>

        <template v-slot="{ row }">
          {{ convertTime(row[col.prop] && row[col.prop].duration)  }}
          <i
            class="el-icon-s-flag"
            style="color: #409eff"
            v-if="row[col.prop] && row[col.prop].selected && row[col.prop].selected === 1"
          ></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
import { convertTime } from "@/utils/date";
export default {
  props: {
    columnList: {
      type: Array,
      default: [],
    },
    tableData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      convertTime,
    };
  },
};
</script>
  
<style lang="less" scoped>
.match-list-table {
  p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /deep/ .el-table th {
    overflow: initial;
  }
  /deep/.el-table th > .cell {
    font-family: PingFangSC-Regular, sans-serif;
    font-size: 14px;
    color: #2e3444;
  }

  /deep/ .el-table thead tr:first-of-type th:first-of-type,
  /deep/ .el-table thead tr:nth-of-type(2) th:first-of-type {
    border-bottom: none;
    padding: 0;
  }
  /deep/ .el-table thead tr:last-of-type th:first-of-type:before {
    content: "";
    position: absolute;
    width: 1px;
    background-color: #ebeef5;
    display: block;
  }
  /deep/ .el-table thead tr:last-of-type th:first-of-type:before {
    height: 183px; //根据情况调整
    bottom: 0;
    right: 0; //根据情况调整
    transform: rotate(-63deg); //根据情况调整
    transform-origin: bottom;
  }
  /deep/ .el-table tbody tr td:first-of-type .cell {
    font-family: PingFangSC-Regular, sans-serif;
    font-size: 14px;
    color: #2e3444;
    font-weight: 600;
    text-align: center;
  }
  .el-table /deep/ .el-table__empty-block {
    width: 100% !important;
  }
}
</style>
  